<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>荣誉称号审核</title>
		<link href="../../element/index.css" rel="stylesheet" />
		<script src="../../js/vue.js"></script>
		<script src="../../element/index.js"></script>
		<script src="../../js/axios.js"></script>
		<style>
			#app {
				width: 1200px;
				margin: 0px auto;
				padding: 0px;
				/* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) */
				/* border: 1px ; */
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
			}

			.el-input {
				width: 280px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.el-form label {
				display: inline-block;
				font-size: 20px;
				width: 280px;
			}

			.el-input__inner {
				/* border: none; */
				text-align: center;
				font-size: 15px;
			}

			.d2 li {
				list-style: none;
			}

			.lyric-enter,
			.lyric-leave-to {
				opacity: 0;
				transform: translateY(10px);
			}

			.lyric-enter-to,
			.lyric-leave {
				opacity: 1;
			}

			.lyric-enter-active,
			.lyric-leave-active {
				transition: all 0.7s;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="id" style=" position: sticky; z-index: 2; top: 0px; background-color: white;">
				<el-row>
					<el-col :span="12" style="padding-left: 80px;">
						<h3>审核结果</h3>
					</el-col>
					<el-col :span="12" style="text-align: right; padding-top: 15px; padding-right: 80px; ">
						<el-button type="primary">
							<el-link style="color: white;" href="list.html" target="_self">返回</el-link>
						</el-button>
					</el-col>
				</el-row>
				<hr />
			</div>
			<el-form ref="form" label-width="180px">
				<el-row style="margin-top: 30px;">
					<el-row>
						<el-col :span="24">
							<el-form-item label="荣誉称号:" prop="rongyuChengHao">
								<el-input v-model="input" readonly style="width: 95%;" v-model="form.rongyuChengHao"></el-input>
							</el-form-item>
							<!-- 跟具自己的修改 可修改为 项目名称 书名 荣誉称号 竞赛名称 专利或软件著作权名称-->
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="9">
							<el-form-item label="填报人姓名:" prop="tianbaoName">
								<el-input v-model="input" readonly style="width: 85%;" v-model="form.tianbaoName"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="得分:" prop="deFen">
								<el-input v-model="input" readonly style="width: 85%;" v-model="form.deFen"></el-input>
								<!-- 教材与专著，教改，科研项目，专利软著的删除此item -->
							</el-form-item>
						</el-col>
						<el-col :span="9">
							<el-form-item label="提交人:" prop="tianbaoName">
								<el-input v-model="input" readonly style="width: 85%;" v-model="form.tianbaoName"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="组织单位:" prop="zuzhiDanWei">
								<el-input v-model="input" readonly v-model="form.zuzhiDanWei"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="获奖时间:" prop="huojiangsDate">
								<el-input v-model="input" readonly v-model="form.huojiangsDate"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="审批负责人:" prop="manager">
								<el-input v-model="input" readonly v-model="form.manager"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="当前状态:" prop="status">
								<el-input v-model="input" readonly v-model="form.status"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="提交时间:" prop="createTime">
								<el-input v-model="input" readonly v-model="form.createTime"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="更新时间:" prop="updateTime">
								<el-input v-model="input" readonly v-model="form.updateTime"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="认证材料:">
								<el-input type="button" v-model="pleaseClick" @click.native="showcont2"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="备注:" prop="memo">
								<el-input v-model="input" readonly v-model="form.memo"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-col :span="8">
						<el-collapse-transition>
							<div v-show="show2" class="d2">
								<ul style="text-align: center;">
									<li v-for="(item,index) in cailiao"><i class="el-icon-document"></i> {{item}}
									</li>
								</ul>
							</div>
						</el-collapse-transition>
					</el-col>
					<el-col :span="24">
						<el-form-item label="审批流程:">
							<el-input type="button" v-model="pleaseClick" @click.native="showcont1"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-collapse-transition>
							<div class="block" v-show="show" style="padding-left: 80px;">
								<el-timeline>
									<el-timeline-item v-for="(item,index) in liuchengData">
										<el-card>
											<h4>{{item.message}}</h4>
											<p>{{item.name}} 提交于 {{item.data}}</p>
										</el-card>
									</el-timeline-item>

								</el-timeline>
							</div>
						</el-collapse-transition>
					</el-col>
					<el-col :span="24">
						<el-form-item label="审核意见:">
							<el-input type="textarea" v-model="textarea" style="width: 400px;"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="审核结果:">
							<el-switch style="display: block;margin-top: 10px;margin-left: 5px;" v-model="value2"
								active-color="#13ce66" inactive-color="#ff4949" active-text="通过" inactive-text="未通过">
							</el-switch>
						</el-form-item>
					</el-col>
					<el-col :span="24" style="text-align: center;margin-bottom: 25px;">
						<el-button type="primary" style="width: 120px; height: 60px;">保存</el-button>
					</el-col>
				</el-row>
			</el-form>
		</div>
	</body>
</html>
<script>
	let vm = new Vue({
		el: "#app",
		data: {
			form: {
				rongyuChengHao: '',
				tianbaoName: '',
				deFen: '',
				zuzhiDanWei: '',
				huojiangsDate: '',
				manager: '',
				status: '',
				createTime: '',
				updateTime: '',
				memo: ''
			},
			activeName: 'second',
			show: false,
			show2: false,
			textarea: "需要补充材料",
			value: "",
			value2: false,
			cailiao: [
				"3.png", "d.doc"
			],
			liuchengData: [{
					message: "提交了新认证材料",
					name: "kal",
					data: "2016-05-02'"
				},
				{
					message: "提交了新认证材料",
					name: "kal",
					data: "2016-05-08'"
				},
				{
					message: "提交了新认证材料",
					name: "kal",
					data: "2016-05-09'"
				}
			],
			pleaseClick: "点击显示",
		},
		methods: {
			find: function(){
				axios("http://localhost:8080/rongyuchenghao/check").then((res) => {
					this.tableData = res.data.data.records
					console.log(this.tableData)
				})
			},
			showcont1: function() {
				this.show = !this.show;
			},
			showcont2: function() {
				this.show2 = !this.show2;
			},
		}
	})
</script>
